<!--
 * @Descripttion: 
 * @version: 
 * @Author: 尹伊
 * @Date: 2020-07-07 11:00:14
 * @LastEditors: 尹伊
 * @LastEditTime: 2020-07-10 11:51:17
-->
<template>
  <div class="steps">
    <div class="step-item" v-for='(item,index) in steps' :key='index'>
      <i class="el-icon-circle-check complete" v-if='currentIndex > index'></i>
      <i v-else :class="currentIndex == index ? 'current-step' : 'after-step'">{{index+1}}</i><span
        :class="currentIndex == index ? 'fc' : ''">{{item}}</span>
      <el-divider v-if='index != steps.length-1'></el-divider>
    </div>
    <el-button @click='handleNextStep'>下一步</el-button>
  </div>
</template>
<script>
  export default {
    head() {
      return {
        title: '步骤条'
      }
    },
    data() {
      return {
        steps: ['填写任务详情', '确定下发指标和填报对象', '下发和保存'],
        currentIndex: 0
      }
    },
    methods: {
      handleNextStep() {
        console.log(this.currentIndex, this.steps)
        if (this.currentIndex < this.steps.length) {
          this.currentIndex++
        }
      }
    },
  }
</script>
<style scoped lang="scss">
  .steps {
    display: flex;
    padding: 30px;

    .step-item {
      display: flex;
      align-items: center;
      width: 30%;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.45);

      .current-step {
        width: 32px;
        display: block;
        height: 32px;
        color: #fff;
        font-size: 16px;
        background-color: #108DE9;
        border-radius: 50%;
        margin-right: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .after-step {
        width: 32px;
        display: block;
        height: 32px;
        color: #c0c0c0;
        font-size: 16px;
        border: 1px solid #c0c0c0;
        border-radius: 50%;
        margin-right: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .fc {
        color: #272727;
      }

      .complete {
        font-size: 32px;
        color: #108DE9;
        margin-right: 10px;
        font-weight: lighter;
      }
    }
  }

  .el-divider--horizontal {
    display: block;
    height: 1px;
    margin: 24px 0;
    flex: 1;
    margin: 0 12px;
  }
</style>